<template>
  <div id="order_details">
    <i class="el-icon-back" @click="detailsBack"></i>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="2"><div>订单编号:</div></el-col>
        <el-col :span="6"
          ><div>{{ details.id }}</div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2"><div>订单金额:</div></el-col>
        <el-col :span="6"
          ><div>{{ orderMoney }}</div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2"><div>下单时间:</div></el-col>
        <el-col :span="6"><div>{{orderTime}}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2"><div>顾客:</div></el-col>
        <el-col :span="6"
          ><div>{{ orderRealname }}</div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2"><div>手机号:</div></el-col>
        <el-col :span="6"
          ><div>{{ orderTelephone }}</div></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      details: {},
      orderTime: "",
      orderMoney: "",
      orderRealname:"",
      orderTelephone:""
    };
  },
  created() {
    this.$axios
      .get("/order/findById", {
        params: {
          id: this.$route.query.id,
        },
      })
      .then((response) => {
        this.orderTime = new Date(response.data.data.customer.registerTime).toLocaleString();
        this.orderMoney = response.data.data.customer.money;
        this.orderRealname = response.data.data.customer.realname;
        this.orderTelephone = response.data.data.customer.telephone;
        this.details = response.data.data;
      });
  },
  methods: {
    detailsBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
#order_details {
  padding: 20px;
}
#order_details i {
  font-size: 30px;
  color: #409eff;
}
.container {
  margin-top: 15px;
}
.container .el-row {
  padding-bottom: 10px;
}
</style>